<h1>!{root.data.title}</h1>
<div id="reg_wrap">
    <div>!{root.lang.__('reg_hint')}</div>
    <div class="uk-margin-top">
        <div class="uk-badge uk-badge-warning">!{root.lang.__('warning')}</div>&nbsp;
        <small>!{root.lang.__('reg_hint_email')}</small>
    </div>
    <div class="uk-alert uk-alert-danger" id="taracot-reg-error"></div>
    <div class="uk-form uk-form-horizontal tc-margin-medium-top">
        <div class="uk-form-row">
            <label class="uk-form-label" for="reg_username">!{root.lang.__('new_username')}&nbsp;<span class="red-asterisk">*</span>:</label>
            <div class="uk-form-controls">
                <input type="text" id="reg_username" class="uk-form-width-medium taracot-auth-field" placeholder="">
                <p class="uk-form-help-inline">
                    <small>!{root.lang.__('new_username_hint')}</small>
                </p>
            </div>
        </div>
        <div class="uk-form-row">
            <label class="uk-form-label" for="reg_password">!{root.lang.__('password_twice')}&nbsp;<span class="red-asterisk">*</span>:</label>
            <div class="uk-form-controls">
                <input type="password" id="reg_password" class="uk-form-width-small taracot-auth-field" placeholder="">
                <input type="password" id="reg_password_repeat" class="uk-form-width-small taracot-auth-field" placeholder="">&nbsp;&nbsp;
                <span class="uk-icon-check uk-icon-medium" style="color:#eee" id="reg_password_match"></span>
                <p class="uk-form-help-block">
                    <small>!{root.lang.__('password_hint')}</small>
                </p>
            </div>
        </div>
        <div class="uk-form-row uk-width-1-2 uk-margin-top">
            <label class="uk-form-label">!{root.lang.__('password_strength')}:</label>
            <div class="uk-form-controls">
                <div class="uk-progress">
                    <div class="uk-progress-bar" id="reg_password_strength" style="width:0"></div>
                </div>
            </div>
        </div>
        <div class="uk-form-row">
            <label class="uk-form-label" for="reg_email">!{root.lang.__('email')}&nbsp;<span class="red-asterisk">*</span>:</label>
            <div class="uk-form-controls">
                <input type="text" id="reg_email" class="uk-form-width-medium taracot-auth-field" placeholder="">
            </div>
        </div>
        <div class="uk-form-row" id="captcha_div">
            <label class="uk-form-label" for="reg_password">!{root.lang.__('captcha')}&nbsp;<span class="red-asterisk">*</span>:</label>
            <div class="uk-form-controls">
                <input class="uk-form-large uk-form-width-small taracot-auth-field" type="text" id="reg_captcha" placeholder="" style="text-align:center">&nbsp;&nbsp;
                <img src="/images/blank.gif" id="reg_captcha_img" data-uk-tooltip title="!{root.lang.__('captcha_click_to_update')}">
            </div>
        </div>
        <div class="uk-form-row">
            <div class="uk-form-controls tc-margin-15 data-uk-margin">
                <button class="uk-button" id="btn_register">!{root.lang.__('btn_register')}</button>
            </div>
        </div>
    </div>
</div>
<div id="reg_loading">
    <img src="/modules/auth/images/loading_16x16.gif" width="16" height="16" alt="">&nbsp;!{root.lang.__('loading_data')}
</div>
<div id="reg_success">
    <p>!{root.lang.__('reg_success')}</p>
    <p>
        <div class="uk-badge uk-badge-success">!{root.lang.__('important')}</div>&nbsp;!{root.lang.__('reg_success_email_hint')}</p>
</div>
<script type="text/javascript">
var _lang_vars = {
    ajax_failed: "!{root.lang.__('ajax_failed')}",
    invalid_username_syntax: "!{root.lang.__('invalid_username_syntax')}",
    invalid_password_syntax: "!{root.lang.__('invalid_password_syntax_or_not_match')}",
    invalid_email_syntax: "!{root.lang.__('invalid_email_syntax')}",
    invalid_captcha: "!{root.lang.__('invalid_captcha')}",
    password_strength_0: "!{root.lang.__('password_strength_0')}",
    password_strength_1: "!{root.lang.__('password_strength_1')}",
    password_strength_2: "!{root.lang.__('password_strength_2')}",
    password_strength_3: "!{root.lang.__('password_strength_3')}",
    password_strength_4: "!{root.lang.__('password_strength_4')}"
};
var captcha_type = "!{root.captcha}";
var captcha_req = !{
    root.captcha_req
};
if (!captcha_req) $('#captcha_div').hide();
$('#taracot-reg-error').hide();
$('#reg_loading').hide();
$('#reg_success').hide();
</script>
<script src="/modules/auth/js/auth_register.min.js"></script>